<!-- vue内置过渡动画transition -->
<!-- 触发条件 v-if v-show -->
<!-- transition-group 是列表的过渡动画 -->
<!-- transition可分为过渡和animation -->
<!-- 当同时都进行的话需要 <Transition type="animation">...</Transition>显示的通过type表明类型 -->
<!-- Transition还有一些实用的钩子函数 -->
<script setup lang='ts'>
import { ref } from 'vue'

const showButton = ref(true)
</script>

<template>
  <div>
    <transition name="button">
      <button v-if="showButton" >这个是过渡动画</button>
    </transition>
    <button @click="showButton = !showButton">触发过渡动画</button>
  </div>
</template>

<style scoped>
.button-enter-active,
.button-leave-active {
  transition: transform ease 1s;
}

.button-enter-from,
.button-leave-to {
  transform: translateY(-20px);
}
</style>